JavaScript

作者

原始 MD by 偉宏

NodeJS!

~~到底是誰覺得把瀏覽器打包出來是個好主意~~

JavaScript與Console

上學期說到，HTML+CSS+JS是網頁檔(.html)的原始語言；分別負責對瀏覽器中的「架構」、「渲染」、「動態」做追蹤或調整

而Node.js則是將瀏覽器中的執行環境給整個抽出來，如此一來就可以用黑畫面（主控台）執行用JavaScript寫的程式

從此，原本只為了控制網頁而生的JS，大開了電腦系統之門 :D

下載NodeJS

裝完後會有一個 "command prompt for NodeJS"，指令得用它才能執行

創建js檔：VS、Notepad++……甚至直接用記事本改副檔名都行（？）

用NodeJS執行：

node ".js檔案位置"

程式語言入門組合技：

程式語言1--變數

可以“隨著程式進行改變儲存值”的值其作用如同一個箱子，可將一些文數字暫存在內 JS中的變數是以“let”宣告區域變數，“var”宣告全域（準確來說：於函數內持續存在的）變數，還有“const”是宣告常數（宣告後只得初始化數值，其後不得更改數值）用法示意如下：

var V = 5;
let L = 8;
const C = 3;

//C = 30; //error

for(...)
{
    var V = 200;
    let L = 1357;
    
    console.log(V); //200
    console.log(L); //1357
}

console.log(L); //5

console.log(V); //1357 <- wtf

程式語言2--判斷

根據數值的變化判斷下一步該怎麼做，流程圖的分支 JS的語法跟大部分高階程式語言一樣：

if(n>10)
{
    console.log("大於十");
}

程式語言3--迴圈

重複重複重複再重複…… for迴圈格式大致都是這樣： for（初始值；執行條件；步進指令）

for (let i=0;i<10;i++)
{
  console.log(i) //1234...
}

以及通常會有個while迴圈： while(執行條件)

let x=-3;
while(x < 10)
{
    console.log(x);
    x += x-5;
}

程式語言4--陣列

用來儲存一連串資料的東西，用陣列名[索引值]儲存資料 JS沒有類型、不用大小，跟python那樣中括號丟進去就對了

let A=[3,1,4,1,5]
while(A[i] != 4)
{
    console.log(A[i]);
}

備註：JS也不管你陣列裡面類別一不一致，例如[1,"hello",3.5]都是合法的存在

程式語言5--函式

用來把程式「分段處理」的用法 JS要宣告函式是用 function 這個關鍵字：

function f(x)
{
    if(x == 0) return 1;
    else return 0;
}

在上面那段函式定義完之後，下面的程式就能呼叫f(x)：

if(f(0) == 1)
{
    console.log("hi");
}

實作題1：請輸出如下圖像，大小自定

* * * *
 * * * 
* * * *
 * * * 
* * * *

實作題2：輸出費氏數列（每一項數字num(x)都是前兩項（num(x-1)跟num(x-2)）的和，並且給定 num(0)=0 ,num(1)=1）
實作題3：把第2題的數字反向輸出一遍

（JS運算式寫法詳見分頁(下箭號)）

主控台輸出函數：console.log()

常見運算子： operators

\=、\=\=、\=\=\=

let  a=10, b="10"

console.log(a === b)
console.log(a == b)
console.log(a = b)

JS--動態弱型別語言！

強/弱型別：會不會在程式跑到一半時幫你“自動轉換資料類型”？
動態/靜態：能不能把各種不同類型的值先後“丟給同一個變數”暫存？

python：動態強型別
JAVA：靜態強型別
c/c++：靜態強型別

動態：方便弱型：方便動態+弱型：非常方便

弱型別的壞處？

let a;
console.log(!([]+{}+"")*2+true) // :D
console.log(a);
console.log(typeof(a));

動態的壞處？

let a=true, b=1, c="1", d=[0,1]

if(a=b)
{
    c=d;
}
else
{
    a=c;
}

console.log(a);
console.log(b);
console.log(c);
console.log(d);

Typescript--加上型別檢查的JS！

let place: string = "World";

place = "sweet home";//ok

place = ["word","helo"] //error

function echo(name: string): string {
    return "Hello " + name;
}

進階用法介紹！

（語法介紹的內容擷取自綺龍學長的簡報

有興趣都可以點進去owob！

Ternary Operator(三元運算子)

if的「縮寫」

let a = 1;
if(a==="1")
    console.log("是1")
else
    console.log("不是1")

let a = 1;
console.log((a==="1") ? "是1":"不是1")

Template Strings(樣板字串)

console.log(`現在時間是: ${year}/${month}/${day} ${hour}:${minute}:${second}`);

跨行字串：

console.log(`1
2
3`);
/*1
2
3*/

For Iteration(for的迭代)

考慮以下程式：

const data = [18,84,45,36,70,28,61,87];
let count = 0;
for (let i=0; i<data.length; i++)
{
    if(data[i]<60) count++;
}
console.log(count);
//4

基本上只跑了一遍data這個Array，就要寫整個for，還要宣告i的始末……

in、of

const data = [18,84,45,36,70,28,61,87];

for (let i in data)
{
    console.log(i) // 以index迭代
}

for (let v of data)
{
    console.log(v) // 以value迭代
}

... (Spread)

搜尋陣列中的最小值：

const data = [18,84,45,36,70,28,61,87];
console.log(Math.min(...data));
// 18

console.log(["開頭", ...data, "結尾"]);
// ['開頭', 18, 84, 45, 36, 70, 28, 61, 87, '結尾']

使用...可以將Array內的value展開

... (Rest)

不確定function會輸入幾個參數？

function test1(a, ...input)
{
    console.log(a, input);
}
test1(null, true, "ABC"); // null [ true, 'ABC' ]
test1(); // undefined []
test1(1,2,3,4,5,6,7,8,9); // 1 [2, 3, 4, 5, 6, 7, 8, 9]

可以將最後一個參數定為Array 要注意的是只能放最後一位

為什麼輸出函數這麼長一串？

在JS中，「萬物皆為物件」（物件是從「自定義的類別」當中宣告出來的變數，詳見後2頁範例）

但其實JavaScript沒有類別，畢竟原本是拿來處理網頁的，它更關心整體資料新版還是有提供建構用的語法：

class player{
  constructor(H,M){
    this.hp = H;
    this.mp = M;
  }
  
  speak()
  {
    console.log("hello");
  }
  
};

在Class-Based的語言當中，會有更嚴格的分類與寫法但JS只把他當成好幾組資料的組合直接用，所以才出現上面那種會讓OOP出身的同學發毛的寫法

let owo = new player();
console.log(typeof(owo));

在有類別的情況下，從「自訂類別」宣告出來的「自訂變數」就叫做“物件(object)”

而在JS當中，不存在類別，並且那些物件裡面還可以裝其他類別，其中在裡面放函數就是我們用的方法所以才會出現很多內建函數都有一堆點點

那在JS中的object到底是什麼？

來自學長的補充：

在JS裡面，object是以dictionary（字典，簡單來說就是可以用數字以外的東西當作index的陣列）的形式儲存，所以也可以用同樣的方法存取

const obj = {};
obj["hi"] = true;
obj.hello = "😋";
console.log(obj);
console.log(obj["hello"]);
console.log(obj.hi);

const newObj = {"我是":"新的", ...obj};
console.log(newObj);

簡報結束！

function Fibonacci(x)
{
  if(x < 0) return 0
  if(x < 2) return x
  return Fibonacci(x-1)+Fibonacci(x-2);
}

A = String() //A = ""

for(let i=7;i;--i)
{
  if(i%2) A="";
  else A=" ";
  
  for(let j=7; j; --j)
    {
      if((10*i+j)%2) A += "*";
      else A += " ";
    }
  console.log(A);
}

let a=1,b=0,s=0;
for(let i=0;i<10;++i)
{
  console.log(s = a+b);
  b = a;
  a = s;
}

for(let i=10;i;--i) console.log(Fibonacci(i))

NodeJS!

JavaScript與Console​

下載NodeJS​

程式語言入門組合技：​

程式語言1--變數​

程式語言2--判斷​

程式語言3--迴圈​

程式語言4--陣列​

程式語言5--函式​

\=、\=\=、\=\=\=

弱型別的壞處？​

動態的壞處？​

進階用法介紹！​

Ternary Operator(三元運算子)​

Template Strings(樣板字串)​

For Iteration(for的迭代)​

in、of​

... (Spread)​

... (Rest)​

為什麼輸出函數這麼長一串？​

那在JS中的object到底是什麼？​

來自學長的補充：​